<script lang="ts" setup>
import Button from './Button.vue';

const props = defineProps<{ visible: boolean }>()
const emit = defineEmits(['update:visible', 'commit'])
const display = computed({
  get: () => props.visible,
  set: (value: boolean) => emit('update:visible', value)
})

const dispatch = (action: string) => {
  if (action === 'CANCEL') {
    display.value = false
    return
  }
  emit('commit')
}

const attrs = useAttrs()
</script>

<template>
  <el-dialog v-model="display" v-bind="attrs" teleport="body">
    <slot />
    <template #footer>
      <div class="flex justify-end dialog-footer">
        <Button class="mr-2" :fill="true" @click="dispatch('CANCEL')">{{$t('cancel')}}</Button>
        <Button :fill="true" @click="dispatch('COMMIT')">{{$t('confirm')}}</Button>
      </div>
    </template>
  </el-dialog>
</template>
